<template>
  <div>
    <el-card>
      <template #header>
        <span>条件搜索</span>
      </template>
      <el-form
        :label-width="globalLabelWidth"
        :model="searchFormData" ref="searchDataForm" size="mini">
        <show-more @getData="getData" @resetSearch="resetSearch">
          <template slot="main">
            <el-row :gutter="globalGutter">
              <el-col v-bind="globalGrid">
                <el-form-item label="模板名称" prop="Name">
                  <el-input
                    @keyup.native.enter="getData"
                    clearable
                    v-model="searchFormData.Name">
                    <el-button icon="el-icon-s-grid" slot="append"></el-button>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col v-bind="globalGrid">
                <el-form-item label="宽" prop="Width">
                  <el-input-number v-model="searchFormData.Width"/>
                </el-form-item>
              </el-col>
              <el-col v-bind="globalGrid">
                <el-form-item label="高" prop="Height">
                  <el-input-number v-model="searchFormData.Height"/>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </show-more>
      </el-form>
    </el-card>

    <el-card style="margin-top: 15px">
      <azure-dynamic-table
        :column-des-objs="columnDesObjs"
        :data="tableData"
        :showSeq="true"
        empty-text="没有找到相关的产品|组件|套系,换个关键词和条件搜一搜或点击上方的新增,🤷‍♂️👏👏😢🎉😉✔🐱‍🏍👍🤣👌"
        v-loading="listLoading">
        <template #tableHead>
          <div style="display: flex;justify-content: space-between;    align-items: center;">
            <el-button @click="addBoardTemplate" icon="el-icon-circle-plus" size="mini" type="primary">
              新增
            </el-button>
            <el-alert
              :closable="false"
              :title="alertTitle"
              show-icon
              style="margin-left: 20px;"
              type="success"/>
          </div>

        </template>
        <template slot="operator" slot-scope="{scope:{row,$index}}">
          <AButton @click="handleEditProduct({row,$index})" type="primary">
            {{`编辑`}}
          </AButton>
          <el-popconfirm
            :title="`是否确定删除该模板？`"
            @confirm="deleteProduct({row,$index,tableData})"
            style="margin-left: 10px;">
            <AButton slot="reference" type="info">
              删除
            </AButton>
          </el-popconfirm>
        </template>
      </azure-dynamic-table>

      <pagination :limit.sync="searchFormData.limit" :page.sync="searchFormData.page"
                  :total="total"
                  @pagination="getData"
                  v-show="total>0"/>
    </el-card>

  </div>

</template>

<script>
  //  产品列表
  import Pagination from '@/components/Pagination/index'
  import AzureDynamicTable from '@/components/ATheFridayClub/mDynamicTable/AzureDynamicTable'
  import { ERR_OK } from '@/utils/commons'
  import ShowMore from '@/components/ATheFridayClub/ShowMore'
  import layoutMixin from '@/mixins/layoutMixin'
  import form from '@/mixins/form'
  import Sticky from '@/components/Sticky/index'
  import AButton from '@/components/ATheFridayClub/AButton'
  import ProductSelect from '@/components/ATheFridayClub/businessSelect/product/ProductSelect'
  import productStatusSelect from '@/components/ATheFridayClub/businessSelect/product/productStatusSelect'
  import productCategoricalSelect from '@/components/ATheFridayClub/businessSelect/product/productCategoricalSelect'
  import productPrintType from '@/components/ATheFridayClub/businessSelect/print/productPrintType'
  import { productBaseCols } from '@/views/baseproduct/mixins/productUtil'
  import ShopTypeSelect from '@/components/ATheFridayClub/businessSelect/product/shopTypeSelect'
  import { productTypesEnum } from '@/enums/product'
  import { dataStatusTypesEnum } from '@/enums/common'
  import { objFirstKeyLowerCase } from '@/utils/fridayClub/objectUtil'
  import { debugLogger } from '@/utils/fridayClub/functianal'
  import { DeleteBoardModel, GetBoardModel } from '@/api/template'
  import { Rectangle } from '@/views/makeupTemplate/boardTemplateUtil'

  export default {
    name: 'makeupTemplate',
    components: {
      ShopTypeSelect,
      ProductSelect,
      AButton,
      Sticky,
      ShowMore,
      AzureDynamicTable,
      Pagination,
      productStatusSelect,
      productCategoricalSelect,
      productPrintType
    },
    data() {
      return {
        columnDesObjs: [
          //     BoardModelDetails: [{BoardModelDetailIId: 1, BoardModelID: 1, locationType: 1, X: 0, Y: 0, Width: 730, Height: 560,…}]
          //     {label:'',key:'BoardModelID'},// : 1
          { label: '模板名字', key: 'Name' },// : "直出750-铜板250g爱丽丝细绒"
          { label: '宽', key: 'Width' },// : 730
          { label: '高', key: 'Height' },// : 560
          { label: '最小高', key: 'MinHeight' },// : 0
          { label: '最小宽', key: 'MinWidth' },// : 0
          { label: '材料', key: 'MaterialItemId' },// : 2
          { label: '打印文件夹', key: 'PrinterFolder' },// : "\\192.168.1.199\auto\750"
          { label: '产品打印类型', key: 'ProductPrintTypeId' },// : 11
          { label: '备注描述', key: 'Reamrk' },// : "直出730"
          { label: '条码方向', key: 'RemarkDirection' },// : 2
          { label: '条码高度', key: 'RemarkHeight' },// : 7
          { label: '条码尺寸', key: 'RemarkCodeSize' },// : 20
          { label: '条码字体尺寸', key: 'RemarkFontSize' },// : 54

          { label: '自由拼版条码方向', key: 'FreeDetailRemarkDirection', isDefaultShowDynamicColumn: false },// : null
          { label: '自由拼版条码高度', key: 'FreeDetailRemarkHeight', isDefaultShowDynamicColumn: false },// : null
          { label: '自由拼版条码尺寸', key: 'FreeDetailRemarkCodeSize', isDefaultShowDynamicColumn: false },// : null
          { label: '自由拼版条码字体尺寸', key: 'FreeDetailRemarkFontSize', isDefaultShowDynamicColumn: false },// : null
          // {label:'',key:'Status'},// : 1
          { label: '拼版利用率', key: 'UsefulRate' },// : null
          { key: 'operator', label: '操作', width: '200' }
          // {label:'',key:'WindowDirection'},// : 0
          // {label:'',key:'IsTransverse'},// : false
        ],
        tableData: [],
        listLoading: false,
        searchFormData: {
          // "BoardModelID": 0,
          'Name': '',
          'Width': '',
          'Height': '',
          page: 1,
          limit: 10
        },
        total: 0
      }
    },
    computed: {
      alertTitle() {
        return `当前总共查询到了${this.total ? this.total : 0}个模板`
      }
    },
    mixins: [layoutMixin, form],
    created() {
      this.getData()
      //  加载product list 数据

      //  加载各类枚举(放入mixin中?????,感觉不太好)
      //  or 单独抽象成为一个组件      组合要更好一些

    },
    methods: {
      resetSearch() {
        this.resetForm('searchDataForm')
        this.resetPage()
        this.getData()
      },

      resetPage() {
        this.page = 1
      },

      async getData() {
        this.listLoading = true
        const {
          searchFormData: {
            page, limit, Name, Width, Height
          }
        } = this
        try {
          const { Code, Result } = await GetBoardModel({
            PageSize: limit,
            PageNum: page,
            Name, Width, Height
          })
          if (Code === ERR_OK) {
            ({ TotalPageCount: this.total, Items: this.tableData } = Result)
          }
        } catch (e) {
          console.log(e)
          this.$message.error('获取(产品|组件|套系)列表失败😒🎂🤷‍♀️')
        } finally {
          this.listLoading = false
        }

      },
      //  对于产品的新增和修改能否抽离出去,便于日后的维护.
      //  视图根据 type 来判断 add or update
      //  新增和修改产品信息
      // beforeAnimateClose() {
      //   //  modifyFormData :: reset
      //
      // },
      addBoardTemplate() {
        this.$router.push({ name: 'modifyMakeupTemplate' })
      },
      //  modifyFormData  = {}
      //  modifyFormStatus =  UPDATE || CREATE
      handleEditProduct({ row, $index } = {}) {
        const { BoardModelID } = row
        this.$router.push({ name: 'modifyMakeupTemplate', query: { BoardModelID } })
      },
      async deleteProduct({ row, $index, tableData }) {
        try {
          const { BoardModelID } = row
          const { Code } = await DeleteBoardModel({ inBoardModelId: BoardModelID })
          if (Code === ERR_OK) {
            tableData.splice($index, 1)
            this.$message.success(`删除模板成功`)
          }
        } catch (e) {
          this.$message.error(e)
          console.log(e)
        } finally {
          this.listLoading = false
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .azure-dropdown {
    /deep/ .el-dropdown-menu__item {
      background-color: unset !important;

    }
  }

</style>
